import React, { useState, useEffect, useRef } from 'react';
import { AppstoreOutlined, HomeOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Layout, Menu, Carousel, Calendar, Button } from 'antd';
import Formattime from './formattime'
import './frame.css'
import Statis from './statis'

import dayjs, { Dayjs } from 'dayjs';
import { Outlet, useNavigate } from 'react-router-dom';
interface CustomMenuItem extends MenuProps {
    // 扩展 Menu.Item 类型
    items: Array<{
        key: string;
        label: React.ReactNode;
        path?: string;  // 添加你需要的自定义属性
        icon?: any,
        children?: any
    }>;
}
type MenuItem = Required<CustomMenuItem>['items'][number];

const { Header, Content, Sider } = Layout;
const items: MenuItem[] = [
    {
        key: '/frame/home',
        label: '首页',
        icon: <HomeOutlined />,
    },
    {
        key: '/frame/main',
        label: '医生工作台',

        icon: <AppstoreOutlined />,
    },
    {
        key: 'sub1',
        label: '患者管理',
        icon: <AppstoreOutlined />,
        children: [
            {
                key: 'g1',
                label: '患者登记',
            },
            {
                key: 'g2',
                label: '患者列表',
            },
        ],
    },
    {
        key: 'sub2',
        label: '门诊查询',
        icon: <AppstoreOutlined />,
        children: [
            { key: '/frame/ptient', label: '患者就诊查询' },
            { key: '/frame/doctor', label: '医技报告查询' },
            { key: '/frame/opd', label: '门诊处方查询' },
            { key: '8', label: '门诊挂号费用查询' },
            { key: '9', label: '门诊医嘱费用查询' },
        ],
    },
    {
        key: 'sub4',
        label: '系统管理',
        icon: <AppstoreOutlined />,
        children: [
            { key: '/frame/Dictionary', label: '字典管理' },
            { key: '/frame/parameter', label: '参数配置' },
            { key: '12', label: '协定处方管理' },
            { key: '/frame/management', label: '词条管理' },
            { key: '/frame/diagnostic', label: '常用诊断管理' },
            {
                key: '15', label: '日志管理',
                children: [
                    {
                        key: '/frame/log_on',
                        label: '登录日志',
                    },
                    {
                        key: '/frame/operation_log',
                        label: '操作日志',
                    }
                ]
            },
        ],
    },
];

function Frame() {
    const navigate = useNavigate()
    const onClick: MenuProps['onClick'] = (e) => {
        console.log(e.key);
        navigate(e.key)
    };
    /////////定时器播放
    const [time, setTime] = useState<any>(new Date().toISOString()); // 设置时间状态为数字类型
    const intervalRef = useRef<any>(null);  // 用来存储定时器ID，类型为 NodeJS.Timeout 或 null

    useEffect(() => {
        if (intervalRef.current === null) {
            intervalRef.current = setInterval(() => {

                setTime(new Date().toISOString());
            }, 1000);  // 每秒更新时间
        }

        // 清理定时器
        return () => {
            if (intervalRef.current !== null) {
                clearInterval(intervalRef.current);
                intervalRef.current = null;
            }
        };
    }, []);  // 只在组件挂载时设置定时器

    /////////定时器播放

    return (
        <>
            <Layout>
                <Header style={{ justifyContent: 'space-between', display: 'flex', padding: '10px', border: '1px solid rgb(240,242,245)', backgroundColor: 'white', alignItems: 'center', height: '60px', width: '100vw', }}>
                    <div className='topl' style={{ display: 'flex', alignItems: 'center', height: '60px', }}>
                        <img style={{ height: '80%', }} src="/wjimgs/1-1.png" alt="" />
                        <h2 style={{ color: 'rgb(4, 104, 255)' }}>门诊医生工作站</h2>
                        <div style={{ margin: '0 25px 0 25px' }}><Formattime data={time} year month day></Formattime></div>
                        <div ><Formattime data={time} h m ></Formattime></div>
                        <div style={{ color: 'gray', marginLeft: '30px' }}>当前诊室：</div>
                        <div>门诊外科</div>
                    </div>

                    <div className='topr' style={{ height: '60px', display: 'flex', width: '300px', justifyContent: 'space-evenly' }}>
                        <div style={{ cursor: 'pointer', height: '100%', textAlign: 'center' }}>
                            <img style={{ height: '40%' }} src="/wjimgs/1-2.png" />
                            <div style={{ position: 'relative', top: '-50px' }}>消息</div>
                        </div>
                        <div style={{ cursor: 'pointer', height: '100%', textAlign: 'center' }}>
                            <img style={{ height: '40%' }} src="/wjimgs/1-3.png" />
                            <div style={{ position: 'relative', top: '-50px' }}>换肤</div>
                        </div>
                        <div style={{ cursor: 'pointer', height: '100%', textAlign: 'center' }}>
                            <img style={{ height: '40%' }} src="/wjimgs/1-4.png" />
                            <div style={{ position: 'relative', top: '-50px' }}>设置</div>
                        </div>
                        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '30%' }}>
                            <div style={{ cursor: 'pointer', width: '24px', height: '24px', background: 'black', borderRadius: '50%' }}></div>
                            <div style={{ cursor: 'pointer', }}>医生</div>
                            <div style={{ cursor: 'pointer', position: 'relative', top: '7px' }}><img src="/wjimgs/1-5.png" style={{ height: '24px', width: '24px' }} /></div>
                        </div>
                    </div>
                </Header>
                <Layout style={{ minHeight: '90vh' }}>
                    <Sider width={260} style={{ height: '90vh', }}>
                        <Menu
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%', overflow: 'auto', fontSize: '17px' }}
                            items={items}
                            mode="inline"
                            onClick={onClick}
                        />
                    </Sider>
                    <Layout style={{ boxSizing: 'border-box', height: '90vh' }}>
                        <Content
                            style={{
                                boxSizing: 'border-box',
                                margin: 0,
                                minHeight: 280,
                                overflow: 'auto',
                                width: '100%',
                                height: '90%',
                                padding: '20px 0 20px 0'
                            }}
                        >
                            <Outlet></Outlet>

                        </Content>
                    </Layout>
                </Layout>
            </Layout>
        </>
    );
}

export default Frame;
